<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>YOLO识别App开发单代号网络图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #main {
            width: 1200px;
            height: 800px;
            margin: 0 auto;
        }
        .title {
            text-align: center;
            font-family: Arial, sans-serif;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1 class="title">YOLO识别App开发单代号网络图</h1>
    <div id="main"></div>
    
    <script>
        // 初始化ECharts实例
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        
        // 定义选项
        var option = {
            title: {
                text: 'YOLO识别App开发流程',
                subtext: '单代号网络图(PDM)',
                left: 'center'
            },
            tooltip: {},
            legend: {
                data: ['研发阶段', '测试阶段', '部署阶段'],
                orient: 'vertical',
                right: 10,
                top: 'center'
            },
            series: [{
                type: 'graph',
                layout: 'none',
                symbol: 'roundRect',
                symbolSize: [120, 50],
                roam: true,
                edgeSymbol: ['none', 'arrow'],
                edgeSymbolSize: [10, 12],
                edgeLabel: {
                    show: true,
                    formatter: function(params) {
                        return params.data.label;
                    }
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}'
                },
                lineStyle: {
                    width: 2,
                    curveness: 0.2
                },
                emphasis: {
                    focus: 'adjacency',
                    lineStyle: {
                        width: 4
                    }
                },
                categories: [
                    { name: '研发阶段', itemStyle: { color: '#5470C6' } },
                    { name: '测试阶段', itemStyle: { color: '#91CC75' } },
                    { name: '部署阶段', itemStyle: { color: '#EE6666' } }
                ],
                data: [
                    // 数据准备阶段
                    {
                        id: '1',
                        name: '需求分析',
                        category: 0,
                        x: 100,
                        y: 300,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '2',
                        name: '数据集收集',
                        category: 0,
                        x: 300,
                        y: 100,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '3',
                        name: '数据标注',
                        category: 0,
                        x: 300,
                        y: 200,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '4',
                        name: '数据增强',
                        category: 0,
                        x: 300,
                        y: 300,
                        itemStyle: { color: '#5470C6' }
                    },
                    
                    // 模型开发阶段
                    {
                        id: '5',
                        name: '模型架构设计',
                        category: 0,
                        x: 500,
                        y: 200,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '6',
                        name: '模型训练',
                        category: 0,
                        x: 500,
                        y: 300,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '7',
                        name: '模型评估',
                        category: 0,
                        x: 500,
                        y: 400,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '8',
                        name: '模型优化',
                        category: 0,
                        x: 700,
                        y: 300,
                        itemStyle: { color: '#5470C6' }
                    },
                    
                    // 后端开发
                    {
                        id: '9',
                        name: 'API设计',
                        category: 0,
                        x: 700,
                        y: 100,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '10',
                        name: '后端开发',
                        category: 0,
                        x: 900,
                        y: 100,
                        itemStyle: { color: '#5470C6' }
                    },
                    
                    // 前端/App开发
                    {
                        id: '11',
                        name: 'UI设计',
                        category: 0,
                        x: 700,
                        y: 500,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '12',
                        name: 'App开发',
                        category: 0,
                        x: 900,
                        y: 400,
                        itemStyle: { color: '#5470C6' }
                    },
                    {
                        id: '13',
                        name: '模型集成',
                        category: 0,
                        x: 900,
                        y: 300,
                        itemStyle: { color: '#5470C6' }
                    },
                    
                    // 测试阶段
                    {
                        id: '14',
                        name: '单元测试',
                        category: 1,
                        x: 1100,
                        y: 100,
                        itemStyle: { color: '#91CC75' }
                    },
                    {
                        id: '15',
                        name: '集成测试',
                        category: 1,
                        x: 1100,
                        y: 200,
                        itemStyle: { color: '#91CC75' }
                    },
                    {
                        id: '16',
                        name: '性能测试',
                        category: 1,
                        x: 1100,
                        y: 300,
                        itemStyle: { color: '#91CC75' }
                    },
                    {
                        id: '17',
                        name: '用户测试',
                        category: 1,
                        x: 1100,
                        y: 400,
                        itemStyle: { color: '#91CC75' }
                    },
                    
                    // 部署阶段
                    {
                        id: '18',
                        name: '模型部署',
                        category: 2,
                        x: 1300,
                        y: 300,
                        itemStyle: { color: '#EE6666' }
                    },
                    {
                        id: '19',
                        name: 'App发布',
                        category: 2,
                        x: 1300,
                        y: 400,
                        itemStyle: { color: '#EE6666' }
                    },
                    {
                        id: '20',
                        name: '运维监控',
                        category: 2,
                        x: 1300,
                        y: 200,
                        itemStyle: { color: '#EE6666' }
                    }
                ],
                links: [
                    // 数据准备流程
                    { source: '1', target: '2', label: 'FS' },
                    { source: '1', target: '3', label: 'FS' },
                    { source: '2', target: '4', label: 'FS' },
                    { source: '3', target: '4', label: 'FS' },
                    
                    // 模型开发流程
                    { source: '4', target: '5', label: 'FS' },
                    { source: '5', target: '6', label: 'FS' },
                    { source: '6', target: '7', label: 'FS' },
                    { source: '7', target: '8', label: 'FS' },
                    
                    // 后端开发流程
                    { source: '1', target: '9', label: 'FS' },
                    { source: '9', target: '10', label: 'FS' },
                    
                    // 前端开发流程
                    { source: '1', target: '11', label: 'FS' },
                    { source: '11', target: '12', label: 'FS' },
                    
                    // 集成流程
                    { source: '8', target: '13', label: 'FS' },
                    { source: '10', target: '13', label: 'FS' },
                    { source: '12', target: '13', label: 'FS' },
                    
                    // 测试流程
                    { source: '13', target: '14', label: 'FS' },
                    { source: '13', target: '15', label: 'FS' },
                    { source: '13', target: '16', label: 'FS' },
                    { source: '13', target: '17', label: 'FS' },
                    { source: '14', target: '18', label: 'FS' },
                    { source: '15', target: '18', label: 'FS' },
                    { source: '16', target: '18', label: 'FS' },
                    { source: '17', target: '19', label: 'FS' },
                    
                    // 部署流程
                    { source: '18', target: '20', label: 'FS' },
                    { source: '19', target: '20', label: 'FS' }
                ]
            }]
        };
        
        // 应用配置
        myChart.setOption(option);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>